<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!--  <link href="framework/icon.css" rel="stylesheet">-->
  <link href="css/reset.css" rel="stylesheet">
  <link rel="stylesheet" href="css/iconfont.css">
  <script src="js/orderList.js"></script>
  <link href="/dist/output.css" rel="stylesheet">
  <title>饿了么 我的订单</title>
</head>
<body>
<div class="w-full h-full">
  <!--    header部分-->
  <header class="w-full h-12 bg-[#0097FF] text-[#fff] text-xl fixed left-0 top-0 z-[1000] flex justify-center items-center ">
    <p>我的订单</p>
  </header>
  <!--    订单列表部分-->
  <h3 class="mt-12 box-border p-4 text-base text-[300] text-[#999]">未支付订单信息:</h3>
  <ul class="w-full">
    <li class="w-full">
      <div class="box-border px-4 py-2 text-base text-[#666] flex justify-between items-center">
        <p>
          万家饺子馆（软件园E18店）
          <i class="fa fa-caret-down"></i>
        </p>
        <div class="flex">
          <p>&#165;49</p>
          <div class="bg-[#f90] text-white rounded-[3px] ml-2 select-none cursor-pointer">去支付</div>
        </div>
      </div>
      <ul class="w-full order-detailed">
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>纯肉鲜肉（水饺）x2</p>
          <p>&#165;15</p>
        </li>
        <li  class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>玉米鲜肉（水饺）</p>
          <p>&#165;16</p>
        </li>
        <li  class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>配送费</p>
          <p>&#165;3</p>
        </li>
      </ul>

    </li>
    <li  class="w-full">
      <div class=" box-border  px-4 py-2 text-base text-[#666] flex justify-between items-center">
        <p>
          小锅饭豆腐馆（全运店）
          <i class="fa fa-caret-down"></i>
        </p>
        <div class="flex">
          <p>&#165;55</p>
          <div class="bg-[#f90] text-white rounded-[3px] ml-2 select-none cursor-pointer">去支付</div>
        </div>
      </div>
      <ul class="w-full  order-detailed">
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>纯肉鲜肉（水饺）x2</p>
          <p>&#165;15</p>
        </li>
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>玉米鲜肉（水饺）</p>
          <p>&#165;16</p>
        </li>
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>配送费</p>
          <p>&#165;3</p>
        </li>
      </ul>

    </li>
  </ul>
  <h3 class="mt-12 box-border p-4 text-base text-[300] text-[#999]">已支付订单信息:</h3>
  <ul class="w-full">
    <li >
      <div class=" box-border py-2 px-4 text-base text-[#666] flex justify-between items-center">
        <p>
          万家饺子馆（软件园E18店）
          <i class="fa fa-caret-down"></i>
        </p>
        <div class="flex">
          <p>&#165;49</p>
          <!--            <div class="order-info-right-icon">去支付</div>-->
        </div>
      </div>
      <ul class="w-full order-detailed">
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>纯肉鲜肉（水饺）x2</p>
          <p>&#165;15</p>
        </li>
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>玉米鲜肉（水饺）</p>
          <p>&#165;16</p>
        </li>
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>配送费</p>
          <p>&#165;3</p>
        </li>
      </ul>

    <li >
      <div class=" box-border py-2 px-4 text-base  text-[#666] flex justify-between items-center">
        <p>
          小锅豆腐馆（全运店）
          <i class="fa fa-caret-down"></i>
        </p>
        <div class="flex">
          <p>&#165;55</p>
          <!--            <div class="order-info-right-icon">去支付</div>-->
        </div>
      </div>
      <ul class="w-full order-detailed">
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>纯肉鲜肉（水饺）x2</p>
          <p>&#165;15</p>
        </li>
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>玉米鲜肉（水饺）</p>
          <p>&#165;16</p>
        </li>
        <li class="w-full box-border py-1 px-4 text-[#666] text-xs flex justify-between items-center">
          <p>配送费</p>
          <p>&#165;3</p>
        </li>
      </ul>
  </ul>
  <!--        底部菜单部分-->
  <ul class="w-full h-14 border-t border-t-[#DDD] bg-white fixed left-0 bottom-0 flex justify-around items-center ">
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer " onclick="location.href='index.html'">
      <div class="text-xl leading-none"><i class="i ic:baseline-home"></i></div>
      <p class="text-xs leading-none">首页</p>
    </li>
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
      <div class="text-xl leading-none"><i class="i ph:compass"></i></i></div>
      <p class="text-xs leading-none">发现</p>
    </li>
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
      <div onclick="location.href='orderList.html'" class="text-xl leading-none"><i class="i mdi:document"></i></div>
      <p class="text-xs leading-none">订单</p>
    </li>
    <li class="flex flex-col justify-center items-center text-[#999] select-none cursor-pointer ">
      <div class="text-xl leading-none"><i class="i ic:baseline-person"></i></div>
      <p class="text-xs leading-none">我的</p>
    </li>

  </ul>
</div>
</body>
</html>